/* Ajuste para que las imágenes coincidan con el ancho del carrusel */
.custom-img, .custom-img2 {
    width: 100%;
    max-width: 1200px; /* O el mismo ancho máximo que tenga tu carrusel */
    height: auto;
    margin: 0 auto;
}

/* Ajuste de los contenedores */
.d-flex.justify-content-center {
    width: 100%;
    padding: 0 15px; /* Mantener el mismo padding que el contenedor principal */
}

/* Ajuste del espaciado */
.mb-lg-5 {
    margin-bottom: 3rem !important;
}

.mt-4 {
    margin-top: 2rem !important;
}

.image-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.banner-img {
    width: 100%;
    height: auto; /* Permite que cada imagen mantenga su proporción original */
    object-fit: contain; /* Asegura que la imagen se muestre completa */
    display: block; /* Elimina espacios extra */
    border-radius: 10px; /* Opcional: bordes redondeados */
}

/* Container styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Carousel and image containers */
#carouselExample,
.image-container,
.product-carousel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Spacing utilities */
.mb-lg-5 {
    margin-bottom: 3rem;
}

/* Media queries para responsividad */
@media (max-width: 992px) {
    .banner-img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .banner-img {
        height: 150px;
    }
    .mb-lg-5 {
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .banner-img {
        height: 100px;
    }
    .mb-lg-5 {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 427px) and (max-width: 768px) {
    #carouselExample {
        margin-top: 20px !important;
    }
}

/* For even better spacing control, you might want a progressive scale: */
@media (min-width: 427px) and (max-width: 576px) {
    #carouselExample {
        margin-top: 15px !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    #carouselExample {
        margin-top: 25px !important;
    }
}

/* Main container for all banners */
.banners-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 40px; /* Increased from 20px to 60px for more spacing between sections */
    padding: 15px;
}

/* Full width banners */
.banner-item.full-width {
    width: 100%;
    margin: 20px 0; /* Additional margin for top/bottom banners */
}

.banner-item.full-width img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Middle section grid */
.banner-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 40px; /* Increased gap */
    align-items: start;
}

.banner-left {
    display: grid;
    grid-template-rows: repeat(2, minmax(400px, auto)); /* Doubled from 200px to 400px */
    gap: 60px; /* Increased gap */
    height: auto;
}

.banner-top,
.banner-bottom {
    width: 100%;
    height: 100%;
    max-height: 400px; /* Doubled from 200px to 400px */
}

.banner-right {
    width: 100%;
    height: 860px; /* Doubled from 430px to 860px */
    align-self: start;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Media queries */
@media (max-width: 992px) {
    .banner-left {
        grid-template-rows: repeat(2, minmax(360px, auto));
    }
    
    .banner-top,
    .banner-bottom {
        max-height: 360px;
    }
    
    .banner-right {
        height: 780px;
    }
}

@media (max-width: 768px) {
    .banner-grid {
        grid-template-columns: 1fr 1fr; /* Changed to 2 columns */
        gap: 15px;
    }
    
    .banner-left {
        grid-template-rows: 1fr; /* Single row */
        grid-template-columns: 1fr 1fr; /* Two columns */
        gap: 15px;
    }

    .banner-top,
    .banner-bottom {
        max-height: 250px; /* Increased from 150px */
    }

    .banner-right {
        display: none; /* Hide large banner */
    }

    .banner-img {
        height: 250px; /* Increased from 150px */
        object-fit: contain;
    }

    .banner-grid {
        grid-template-columns: 1fr;
        gap: 15px; /* Further reduced */
        height: 250px; /* Match the height of publi1 and publi2 */
    }
    
    .banner-left {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        height: 250px; /* Match container height */
    }

    .banners-container {
        gap: 8px; /* Reduced gap between main sections */
        padding: 8px; /* Further reduced */
    }
    
    .banner-item.full-width {
        margin: 5px 0; /* Reduced margin for full width banners */
    }
}

@media (max-width: 576px) {
    .banner-grid {
        gap: 10px;
        height: 180px; /* Match the smaller height for mobile */
    }
    
    .banner-left {
        gap: 10px;
        height: 180px;
    }

    .banner-top,
    .banner-bottom {
        max-height: 180px; /* Increased from 120px */
    }

    .banner-img {
        height: 180px; /* Increased from 120px */
    }

    .banner-grid {
        gap: 10px; /* Minimum gap for smallest screens */
    }
    
    .banner-left {
        gap: 10px;
    }

    .banners-container {
        gap: 5px; /* Further reduced gap for mobile */
        padding: 5px;
    }
    
    .banner-item.full-width {
        margin: 3px 0; /* Minimal margin for mobile */
    }
}